<template>
  <swiper ref="mySwiper" :options="swiperOptions" class="swiperList">
    <swiper-slide v-for="(item,index) in carouselList" :key="index">
      <img :src="item.imageUrl" alt />
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
 
<script>
import Carouse1 from "../../assets/img/centerHome/Carousel1.png";
import Carouse2 from "../../assets/img/centerHome/Carousel2.png";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { ReqAllRotationChart } from "../../request/index";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      carouselList: [],
      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 4000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        }
      }
    };
  },
  methods: {
    // 获取轮播图列表
    async getCarouselList() {
      let RotationList = await ReqAllRotationChart();
      this.carouselList = RotationList.page.list;
    }
  },
  async created() {
    await this.getCarouselList();
  }
};
</script> 
<style>
.swiperList {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  display: block;
  width: 100vw;
  height: 30vw;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .swiper-slide img {
    width: 100%;
    padding: 0;
    height: 50vw;
  }
}
</style>